<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>我的博客</title>
		<meta name="renderer" content="webkit" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="icon" type="image/png" href="assets/i/favicon.png" />
		<meta name="mobile-web-app-capable" content="yes" />
		<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />
		<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png" />
		<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png" />
		<meta name="msapplication-TileColor" content="#0e90d2" />
		<link rel="stylesheet" href="assets/css/amazeui.min.css" />
		<link rel="stylesheet" href="assets/css/app.css" />
	</head>

	<body id="blog">
		<!-- nav start -->
		<nav class="am-g am-g-fixed blog-fixed blog-nav">
			<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only blog-button" data-am-collapse="{target: '#blog-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

			<div class="am-collapse am-topbar-collapse" id="blog-collapse">
				<ul class="am-nav am-nav-pills am-topbar-nav">
					<li class="am-active"><a href="index.html">首页</a></li>
					<li th:each="type:${types}">
						<a href="article.html" th:text="${type.name}"></a>
					</li>
				</ul>
				<form class="am-topbar-form am-topbar-right am-form-inline" role="search">
					<div class="am-form-group">
						<input type="text" class="am-form-field am-input-sm" placeholder="搜索" />
					</div>
				</form>
			</div>
		</nav>
		<hr/>
		<!-- nav end -->
		<!-- content srart -->
		<div class="am-g am-g-fixed blog-fixed blog-content">
			<div class="am-u-md-8 am-u-sm-12">
				<article class="am-article blog-article-p">
					<div class="am-article-hd">
						<p class="fa fa-leanpub" style="background-color: bisque;">
							<span>博客正文</span>
						</p>
						<h1 class="am-article-title blog-text-center" th:text="${article.title}"></h1>
						<p class="am-article-meta blog-text-center">
							<span><a href="#" class="blog-color">article &nbsp;</a></span>-
							<span><a href="#">@amazeUI &nbsp;</a></span>-
							<span><a href="#" th:text="${article.createTime}"></a></span>
						</p>
					</div>
					<div class="am-article-bd">
						<img th:attr="src=${article.img}" alt="" class="blog-entry-img blog-article-margin" style="width:630px;height:350px" /> 摘要：
						<p class="am-article-lead" th:text="${article.abstrct}"></p>
						<p th:utext="${article.content}"></p>
					</div>
				</article>
				<div class="am-u-lg-12 am-u-md-12 am-u-sm-12 article_manage" style="font-size: 15px;color: rosybrown;">
					浏览
					<a id="browsers" th:text="'('+${article.browsers}+') ┆'"></a>
					<a id="comment">评论</a> (5) ┆
					<a id="send">转发</a> (4) ┆
					<a id="saves">收藏</a> (15) ┆ 点赞
					<a id="likes" th:text="'('+${article.likes}+') '"></a>
					<div class="" style="float: right;">
						<span>分享</span>
						<a href=""><span class="am-icon-qq am-icon-fw am-primary "></span></a>
						<a href=""><span class="am-icon-wechat am-icon-fw"></span></a>
						<a href=""><span class="am-icon-weibo am-icon-fw "></span></a>
					</div>
				</div>

				<hr/>
				<form class="am-form am-g" id="pl-form" style="margin-top: 100px;">
					<h3 class="blog-comment">评论</h3>
					<fieldset>
						<div class="am-form-group">
							<input type="hidden" name="article_id" th:attr="value=${article.id}" />
							<textarea name="content" class="" rows="5" placeholder="一字千金"></textarea>
						</div>
						<p><button type="button" class="am-btn am-btn-default" id="pl-btn">发表评论</button></p>
					</fieldset>
				</form>
				<div th:each="comment:${article.comments}" class="am-g blog-author blog-article-margin">
					<div class="am-u-sm-3 am-u-md-3 am-u-lg-2">
						<img src="assets/i/f15.jpg" alt="" class="blog-author-img am-circle" />
					</div>
					<div class="am-u-sm-9 am-u-md-9 am-u-lg-10">
						<h3><span>用户 &nbsp;: &nbsp;</span><span class="blog-color" th:text="${comment.userIp}">amazeui</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<small  th:text="${comment.date}" style="float: right"></small></h3>

						<p th:text="${comment.content}"></p>
					</div>
				</div>
				<hr/>

				<hr/>
			</div>

			<div class="am-u-md-4 am-u-sm-12 blog-sidebar">
				<div class="blog-sidebar-widget blog-bor">
					<h2 class="blog-text-center blog-title"><span>About ME</span></h2>
					<img src="assets/i/f161.jpg" alt="about me" class="blog-entry-img" />
					<p>妹纸</p>
					<p>
						我是妹子UI，中国首个开源 HTML5 跨屏前端框架
					</p>
					<p>我不想成为一个庸俗的人。十年百年后，当我们死去，质疑我们的人同样死去，后人看到的是裹足不前、原地打转的你，还是一直奔跑、走到远方的我？</p>
				</div>
				<div class="blog-sidebar-widget blog-bor">
					<h2 class="blog-text-center blog-title"><span>Contact ME</span></h2>
					<p>
						<a href=""><span class="am-icon-qq am-icon-fw am-primary blog-icon"></span></a>
						<a href=""><span class="am-icon-github am-icon-fw blog-icon"></span></a>
						<a href=""><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
						<a href=""><span class="am-icon-reddit am-icon-fw blog-icon"></span></a>
						<a href=""><span class="am-icon-weixin am-icon-fw blog-icon"></span></a>
					</p>
				</div>
				<div class="blog-clear-margin blog-sidebar-widget blog-bor am-g ">
					<h2 class="blog-title"><span>TAG cloud</span></h2>
					<div class="am-u-sm-12 blog-clear-padding">
						<a href="" class="blog-tag">amaze</a>
						<a href="" class="blog-tag">妹纸 UI</a>
						<a href="" class="blog-tag">HTML5</a>
						<a href="" class="blog-tag">这是标签</a>
						<a href="" class="blog-tag">Impossible</a>
						<a href="" class="blog-tag">开源前端框架</a>
					</div>
				</div>
				<div class="blog-sidebar-widget blog-bor">
					<h2 class="blog-title"><span>么么哒</span></h2>
					<ul class="am-list">
						<li><a href="#">每个人都有一个死角， 自己走不出来，别人也闯不进去。</a></li>
						<li><a href="#">我把最深沉的秘密放在那里。</a></li>
						<li><a href="#">你不懂我，我不怪你。</a></li>
						<li><a href="#">每个人都有一道伤口， 或深或浅，盖上布，以为不存在。</a></li>
					</ul>
				</div>

			</div>
		</div>
		<!-- content end -->

		<footer class="blog-footer">
			<div class="am-g am-g-fixed blog-fixed am-u-sm-centered blog-footer-padding">
				<div class="am-u-sm-12 am-u-md-4- am-u-lg-4">
					<h3>模板简介</h3>
					<p class="am-text-sm">这是一个使用amazeUI做的简单的前端模板。<br/> 博客/ 资讯类 前端模板 <br/> 支持响应式，多种布局，包括主页、文章页、媒体页、分类页等<br/>嗯嗯嗯，不知道说啥了。外面的世界真精彩<br/><br/> Amaze UI 使用 MIT 许可证发布，用户可以自由使用、复制、修改、合并、出版发行、散布、再授权及贩售 Amaze UI 及其副本。</p>
				</div>
				<div class="am-u-sm-12 am-u-md-4- am-u-lg-4">
					<h3>社交账号</h3>
					<p>
						<a href=""><span class="am-icon-qq am-icon-fw am-primary blog-icon blog-icon"></span></a>
						<a href=""><span class="am-icon-github am-icon-fw blog-icon blog-icon"></span></a>
						<a href=""><span class="am-icon-weibo am-icon-fw blog-icon blog-icon"></span></a>
						<a href=""><span class="am-icon-reddit am-icon-fw blog-icon blog-icon"></span></a>
						<a href=""><span class="am-icon-weixin am-icon-fw blog-icon blog-icon"></span></a>
					</p>
					<h3>Credits</h3>
					<p>我们追求卓越，然时间、经验、能力有限。Amaze UI 有很多不足的地方，希望大家包容、不吝赐教，给我们提意见、建议。感谢你们！</p>
				</div>
				<div class="am-u-sm-12 am-u-md-4- am-u-lg-4">
					<h1>我们站在巨人的肩膀上</h1>
					<h3>Heroes</h3>
					<p>
						<ul>
							<li>jQuery</li>
							<li>Zepto.js</li>
							<li>Seajs</li>
							<li>LESS</li>
							<li>...</li>
						</ul>
					</p>
				</div>
			</div>
			<div class="blog-text-center">© 2015 AllMobilize, Inc. Licensed under MIT license. Made with love By LWXYFER</div>
		</footer>

		<!--[if (gte IE 9)|!(IE)]><!-->
		<script src="assets/js/jquery.min.js"></script>
		<!--<![endif]-->
		<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
		<script src="assets/js/amazeui.min.js"></script>
		<!-- <script src="assets/js/app.js"></script> -->
		<script type="text/javascript">
			$("#pl-btn").click(function() {
				$.post('save', $("#pl-form").serialize(), function(data) {
					alert(data);
				})
			})
		</script>
	</body>

</html>